<template>
  <div>
    <h1>组合式 API：生命周期钩子</h1>
    <div>
      <p @click="num++">数字累加：{{ num }}</p>
    </div>

    <div>
      <h1>User List</h1>
      <ul>
        <li v-for="user in users" :key="user.id">{{ user.name }}</li>
      </ul>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: 'Study4StuDemo6'
}
</script>
<script setup lang="ts">
import {
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
  ref
} from 'vue'

const num = ref(100)

// 定义用户类型
interface IUser {
  id: number
  name: string
  username: string
  email: string
  address: {
    street: string
    suite: string
    city: string
    zipcode: string
    geo: {
      lat: string
      lng: string
    }
  }
  phone: string
  website: string
  company: {
    name: string
    catchPhrase: string
    bs: string
  }
}

const users = ref<IUser[]>([])

onMounted(async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users')
  users.value = await response.json()
})

// 注册一个回调函数，在组件挂载完成后执行。
onMounted(() => {
  console.log('onMounted:在组件挂载完成后执行')
})

// 注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。
onUpdated(() => {
  console.log('onUpdated:在组件因为响应式状态变更而更新其 DOM 树之后调用')
})

// 注册一个回调函数，在组件实例被卸载之后调用
onUnmounted(() => {
  console.log('onUnmounted:在组件实例被卸载之后调用')
})

// 注册一个钩子，在组件被挂载之前被调用。
onBeforeMount(() => {
  console.log('onBeforeMount:在组件被挂载之前被调用')
})

// 注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
onBeforeUpdate(() => {
  console.log('onBeforeUpdate:，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。')
})

// 注册一个钩子，在组件实例被卸载之前调用。
onBeforeUnmount(() => {
  console.log('onBeforeUnmount:在组件实例被卸载之前调用')
})
</script>

<style></style>
